<template>
    <div>
        <!--搜索表单-->
        <div>
            <Form ref="search" :model="search" inline :label-width="60">
                <FormItem prop="userName" label="住户">
                    <Input type="text" v-model="search.userName" placeholder="住户">
                    </Input>
                </FormItem>
                <FormItem prop="adminName" label="检查员">
                    <Input type="text" v-model="search.adminName" placeholder="检查员">
                    </Input>
                </FormItem>
                <FormItem prop="passStatus" label="通过方式">
                    <Select v-model="search.passStatus" style="width: 180px">
                        <i-option value="1">进入</i-option>
                        <i-option value="0">离开</i-option>
                    </Select>
                </FormItem>
                <FormItem prop="passResult" label="通行结果">
                    <Select v-model="search.passResult" style="width: 180px">
                        <i-option value="0">批准放行</i-option>
                        <i-option value="1">拒绝放行</i-option>
                    </Select>
                </FormItem>
                <FormItem prop="passResult" label="健康状态">
                    <Select v-model="search.healthStatus" style="width: 180px">
                        <i-option value="0">健康</i-option>
                        <i-option value="1">异常</i-option>
                        <i-option value="2">确诊</i-option>
                    </Select>
                </FormItem>
                <FormItem prop="recordAddress" label="记录地址">
                    <Input type="text" v-model="search.recordAddress" placeholder="记录地址">
                    </Input>
                </FormItem>
                <DatePicker v-model="search.dates" format="yyyy/MM/dd" type="daterange" placement="bottom-end"
                            placeholder="选择入档日期范围" style="width: 200px;margin-left: 40px;"></DatePicker>
                <FormItem prop="field" label="排序项">
                    <Select v-model="search.field" style="width: 180px">
                        <i-option value="recordId">编号</i-option>
                        <i-option value="userId">住户</i-option>
                        <i-option value="adminId">检查员</i-option>
                        <i-option value="temperature">体温</i-option>
                        <i-option value="recordTime">记录时间</i-option>
                    </Select>
                </FormItem>
                <FormItem prop="isAsc" label="排序">
                    <Select v-model="search.isAsc" style="width: 180px">
                        <i-option :value="1">正序</i-option>
                        <i-option :value="0">倒序</i-option>
                    </Select>
                </FormItem>
            </Form>
        </div>
        <!--表头操作按钮-->
        <div class="mb20">
            <Button type="primary" icon="ios-add-circle-outline" @click="showAddModal">添加</Button>
            <Button type="error" :disabled="del_disabled" icon="md-trash" @click="deleteList" class="ml20">删除</Button>
<!--            <Button type="warning" icon="ios-cloud-upload-outline" @click="" class="ml20">导入</Button>-->
            <Button type="success" icon="ios-cloud-download-outline" @click="exportExcel" class="ml20">导出</Button>
            <Button type="primary" icon="ios-search" @click="searchSubmit" class="ml20">搜索</Button>
            <Button icon="md-refresh" @click="handleReset" class="ml20">Reset</Button>
        </div>
        <Table border stripe :columns="columns" :data="data" :loading="loading"
               @on-select="on_select" @on-select-cancel="on_select_cancel"
               @on-select-all="on_select_all" @on-select-all-cancel="on_select_all_cancel">
            <!--使用插槽处理自定义渲染的数据-->
            <template slot-scope="{ row, index }" slot="passStatus">
                <Tag>{{row.passStatusMeaning}}</Tag>
            </template>
            <template slot-scope="{ row, index }" slot="passResult">
                <Tag color="success" v-if="row.passResult===0">{{row.passResultMeaning}}</Tag>
                <Tag color="error" v-else>{{row.passResultMeaning}}</Tag>
            </template>
            <template slot-scope="{ row, index }" slot="healthStatus">
                <Tag color="success" v-if="row.healthStatus===0">{{row.healthStatusMeaning}}</Tag>
                <Tag color="warning" v-else-if="row.healthStatus===1">{{row.healthStatusMeaning}}</Tag>
                <Tag color="error" v-else>{{row.healthStatusMeaning}}</Tag>
            </template>


            <template slot-scope="{ row, index }" slot="action">
                <Button type="info" icon="md-create" size="small" @click="showChangeModal(row)"
                        style="margin-top: 5px;">修改
                </Button>
            </template>
        </Table>
        <Page :total="pageData.totalElements" :page-size="pageSize" show-elevator show-total @on-change="change"
              class-name="page-style"></Page>

        <!--添加弹窗-->
        <Modal :closable=false
               title="新增出入记录"
               v-model="modal_add"
               ok-text="确定"
               @on-ok="handleSubmit('formAdd',formAdd)"
               class-name="vertical-center-modal">
            <div>
                <Form ref="formAdd" :model="formAdd" :rules="ruleInline">
                    <FormItem prop="userId" label="住户">
                        <Select filterable  v-model="formAdd.userId" style="width: 200px">
                            <i-option v-for="item in allUser" :key="item.userId"
                                      :value="item.userId">{{item.name}}</i-option>
                        </Select>
                    </FormItem>
                    <FormItem prop="adminId" label="检查员">
                        <Select filterable  v-model="formAdd.adminId" style="width: 200px">
                            <i-option v-for="item in allAdmin" :key="item.adminId"
                                      :value="item.adminId">{{item.name}}</i-option>
                        </Select>
                    </FormItem>
                    <FormItem prop="temperature" label="体温">
                        <Input type="text" v-model="formAdd.temperature" placeholder="请输入体温"></Input>
                    </FormItem>
                    <FormItem prop="passStatus" label="通过方式">
                        <Select v-model="formAdd.passStatus" style="width: 200px">
                            <i-option value="1">进入</i-option>
                            <i-option value="0">离开</i-option>
                        </Select>
                    </FormItem>
                    <FormItem prop="passResult" label="通行结果">
                        <Select v-model="formAdd.passResult" style="width: 200px">
                            <i-option value="0">批准放行</i-option>
                            <i-option value="1">拒绝放行</i-option>
                        </Select>
                    </FormItem>
                    <FormItem prop="healthStatus" label="健康状态">
                        <Select v-model="formAdd.healthStatus" style="width: 200px">
                            <i-option value="0">健康</i-option>
                            <i-option value="1">异常</i-option>
                            <i-option value="2">确诊</i-option>
                        </Select>
                    </FormItem>
                    <FormItem prop="recordAddress" label="记录地点">
                        <Input type="text" v-model="formAdd.recordAddress" placeholder="请输入记录地点"></Input>
                    </FormItem>
                    <FormItem prop="tripDesc" label="行程描述">
                        <Input type="textarea" v-model="formAdd.tripDesc" placeholder="请输入行程描述"></Input>
                    </FormItem>
                    <FormItem prop="remarks" label="备注">
                        <Input type="textarea" v-model="formAdd.remarks" placeholder="请输入备注"></Input>
                    </FormItem>
                </Form>
            </div>
        </Modal>
        <!--修改弹窗-->
        <Modal :closable=false
               title="修改出入记录"
               v-model="modal_change"
               ok-text="确定"
               @on-ok="updateSubmit('formChange',formChange)">
            <div>
                <Form ref="formChange" :model="formChange" :rules="ruleInline">
                    <FormItem prop="temperature" label="体温">
                        <Input type="text" v-model="formChange.temperature" placeholder="请输入体温"></Input>
                    </FormItem>
                    <FormItem prop="passStatus" label="通过方式">
                        <Select v-model="formChange.passStatus" style="width: 200px">
                            <i-option value="1">进入</i-option>
                            <i-option value="0">离开</i-option>
                        </Select>
                    </FormItem>
                    <FormItem prop="passResult" label="通行结果">
                        <Select v-model="formChange.passResult" style="width: 200px">
                            <i-option value="0">批准放行</i-option>
                            <i-option value="1">拒绝放行</i-option>
                        </Select>
                    </FormItem>
                    <FormItem prop="passResult" label="健康状态">
                        <Select v-model="formChange.healthStatus" style="width: 200px">
                            <i-option value="0">健康</i-option>
                            <i-option value="1">异常</i-option>
                            <i-option value="2">确诊</i-option>
                        </Select>
                    </FormItem>
                    <FormItem prop="recordAddress" label="记录地点">
                        <Input type="text" v-model="formChange.recordAddress" placeholder="请输入记录地点"></Input>
                    </FormItem>
                    <FormItem prop="tripDesc" label="行程描述">
                        <Input type="textarea" v-model="formChange.tripDesc" placeholder="请输入行程描述"></Input>
                    </FormItem>
                    <FormItem prop="remarks" label="备注">
                        <Input type="textarea" v-model="formChange.tripDesc" placeholder="请输入备注"></Input>
                    </FormItem>
                </Form>
            </div>
        </Modal>
    </div>
</template>

<script>
    import {dateToString, downloadExcel, exportExcel, judgePhone} from "../utils/util";

    export default {
        name: "HealthRecord",
        data() {

            return {
                loading: false,  //是否显示表格加载
                modal_add: false,
                modal_change: false,
                modal_reset: false,
                del_disabled: true,
                isSearch: false,   //当前是不是搜索模式
                data: [],
                current: 1,
                pageSize: 5,
                pageData: [],
                columns: [
                    {
                        type: 'selection',  //可以选择的一项
                        width: 60,
                        align: 'center'
                    },
                    {
                        title: '编号',
                        key: 'recordId',
                        sortable: true
                    },
                    {
                        title: '住户',
                        key: 'userName'
                    },
                    {
                        title: '检查员',
                        key: 'adminName'
                    },
                    {
                        title: '体温',
                        key: 'temperature'
                    },
                    {
                        title: '通过方式',
                        slot: 'passStatus',
                        width: 90
                    },
                    {
                        title: '通行结果',
                        slot: 'passResult',
                        width: 110
                    },
                    {
                        title: '健康状态',
                        slot: 'healthStatus',
                        width: 90
                    },
                    {
                        title: '记录地点',
                        key: 'recordAddress'
                    },
                    {
                        title: '行程描述',
                        key: 'tripDesc'
                    },
                    {
                        title: '备注',
                        key: 'remarks'
                    },
                    {
                        title: '记录时间',
                        key: 'recordTime',
                        width: 100
                    },
                    {
                        title: '操作',
                        slot: 'action',
                        width: 90
                    }
                ],
                formAdd: {
                    userId: null,
                    adminId: null,
                    temperature: null,
                    passStatus: null,
                    passResult: null,
                    healthStatus: null,
                    recordAddress: null,
                    tripDesc: null,
                    remarks: null,
                    recordTime: null
                },
                formChange: {
                    recordId: null,
                    userId: null,
                    temperature: null,
                    passStatus: null,
                    passResult: null,
                    healthStatus: null,
                    recordAddress: null,
                    tripDesc: null,
                    remarks: null
                },
                ruleInline: {
                    userId: [
                        {required: true, message: '住户不能为空', trigger: 'blur',type:'number'}
                    ],
                    adminId: [
                        {required: true, message: '检查员不能为空', trigger: 'blur',type:'number'}
                    ],
                    temperature: [
                        {required: true, message: '体温不能为空', trigger: 'blur'},
                        { type: 'string',pattern:/^(([1-9]\d{0,2})|0)(\.\d{0,2})?$/, message:'请输入两位小数的浮点数体温', trigger:'blur'}
                    ],
                    passStatus: [
                        {required: true, message: '通行方式不能为空', trigger: 'blur'}
                    ],
                    passResult: [
                        {required: true, message: '通行结果 不能为空', trigger: 'blur'}
                    ],
                    healthStatus: [
                        {required: true, message: '健康状态不能为空', trigger: 'blur'}
                    ],
                    recordAddress: [
                        {required: true, message: '记录地点不能为空', trigger: 'blur'}
                    ],
                    tripDesc: [
                        {required: true, message: '行程描述不能为空', trigger: 'blur'}
                    ]
                },
                selectIds: [],     //表格中的选中项的Id
                search: {
                    userName: '',
                    adminName: '',
                    passStatus: null,
                    passResult: null,
                    healthStatus: null,
                    recordAddress: '',
                    dates: [],
                    page: 1,
                    size: 10,
                    isAsc: 1,
                    field: ''
                },
                allUser: [],
                allAdmin: []
            }
        },
        created() {
            this.query();
            this.getAllAdmin()
            this.getAllUser()
        },
        methods: {
            query() {
                this.loading = true  //显示表格加载动画
                this.request({
                    url: '/health/record',
                    method: 'get',
                    params: {page: this.current, size: this.pageSize}
                }).then(res => {
                    this.data = res.data.content
                    this.pageData = res.data
                }).finally(() => {
                    this.loading = false
                })
            },
            change(current) {
                this.current = current;
                this.refreshData();
            },
            refreshData() {
                //刷新数据
                //判断当前页面是不是搜索模式
                if (this.isSearch) {
                    this.querySearch();
                } else {
                    this.query();
                }
            },
            on_select(selection, row) {
                this.selectIds.push(row.recordId)
                this.del_disabled = false //去掉删除按钮的禁用状态
            },
            on_select_cancel(selection, row) {
                this.selectIds.forEach((t, index, arr) => {
                    if (row.recordId === t) {
                        arr.splice(index, 1);    //删除取消的选项
                    }
                })
                if (this.selectIds.length === 0) {
                    this.del_disabled = true //删除按钮的禁用状态
                }
            },
            on_select_all(selection) {
                selection.forEach((t, index, arr) => {
                    this.selectIds.push(t.recordId)
                })
                this.del_disabled = false //去掉删除按钮的禁用状态
            },
            on_select_all_cancel(selection) {
                this.selectIds = []
                this.del_disabled = true //删除按钮的禁用状态
            },
            deleteList() {
                if (!this.$store.state.isAdmin){
                    this.$Message.error('你没有此操作权限!');
                    return;
                }

                this.$Modal.confirm({
                    title: '提醒',
                    content: '确定要删除所选中的所有出入记录数据？',
                    onOk: () => {
                        this.loading = true
                        this.request({
                            url: '/health/record/list',
                            method: 'delete',
                            params: {ids: this.selectIds},
                            paramsSerializer: params => {
                                return this.$qs.stringify(params, {indices: false})
                            }
                        }).then(res => {
                            this.$Message.info(res.msg);
                            this.refreshData(); //更新当前页面
                        }).finally(() => {
                            this.loading = false
                        })
                    },
                    onCancel: () => {
                        this.$Message.info('已取消删除');
                    }
                });
            },
            //重置按键
            handleReset() {
                this.search = {
                    userName: '',
                    adminName: '',
                    passStatus: null,
                    passResult: null,
                    healthStatus: null,
                    recordAddress: '',
                    dates: [],
                    page: 1,
                    size: 10,
                    isAsc: 1,
                    field: ''
                }
                //重置页面
                this.isSearch = false
                this.current = 1
                this.query()
            },
            searchSubmit() {
                //条件搜索
                this.current = 1
                this.isSearch = true
                this.querySearch();
            },
            querySearch() {
                this.loading = true
                let dates = this.search.dates
                if (dates.length < 2) {
                    this.search.dates = ['', '']
                }
                if (dates.length === 2) {
                    this.search.dates = [dateToString(dates[0]), dateToString(dates[1])]
                }
                this.search.page = this.current
                this.search.size = this.pageSize

                this.request({
                    url: '/health/record/search',
                    method: 'get',
                    params: this.search,
                    paramsSerializer: params => {
                        return this.$qs.stringify(params, {indices: false})
                    }
                }).then(res => {
                    this.data = res.data.content
                    this.pageData = res.data
                    // console.log(this.data)
                }).finally(() => {
                    this.loading = false
                })
            },
            showAddModal() {
                if (!this.$store.state.isAdmin){
                    this.$Message.error('你没有此操作权限!');
                    return;
                }

                this.modal_add = true;
                this.formAdd = {
                        userId: null,
                        adminId: null,
                        temperature: null,
                        passStatus: null,
                        passResult: null,
                        healthStatus: null,
                        recordAddress: null,
                        tripDesc: null,
                        remarks: null,
                        recordTime: null
                }
            },
            showChangeModal(row) {
                if (!this.$store.state.isAdmin){
                    this.$Message.error('你没有此操作权限!');
                    return;
                }
                // console.log(row)

                //展示弹窗
                this.modal_change = true
                //要修改的信息
                this.formChange.recordId = row.recordId
                this.formChange.userId = row.userId
                this.formChange.temperature = row.temperature + ''
                this.formChange.passStatus = row.passStatus + ''   //变成字符串才能显示在选择框
                this.formChange.passResult = row.passResult + ''
                this.formChange.healthStatus = row.healthStatus + ''
                this.formChange.recordAddress = row.recordAddress
                this.formChange.tripDesc = row.tripDesc
                this.formChange.remarks = row.remarks
            },
            handleSubmit(name, data) {
                this.$refs[name].validate((valid) => {
                    if (valid) {
                        this.loading = true
                        this.request({
                            url: '/health/record',
                            method: 'post',
                            data: JSON.stringify(data),
                        }).then(res => {
                            this.refreshData();        //更新修改行的数据
                            this.$Message.success(res.msg);
                        }).finally(() => {
                            this.loading = false
                        })
                    } else {
                        this.$Message.error('填写内容不符合要求!');
                    }
                })
            },
            updateSubmit(name, data) {
                this.$refs[name].validate((valid) => {
                    if (valid) {
                        this.loading = true
                        this.request({
                            url: '/health/record',
                            method: 'put',
                            data: JSON.stringify(data),
                        }).then(res => {
                            this.refreshData();        //更新修改行的数据
                            this.$Message.success(res.msg);
                        }).finally(() => {
                            this.loading = false
                        })
                    } else {
                        this.$Message.error('填写内容不符合要求!');
                    }
                })
            },
            getAllUser(){
                this.request({
                    url: '/user/all',
                    method: 'get'
                }).then(res => {
                    this.allUser =  res.data
                })
            },
            getAllAdmin(){
                this.request({
                    url: '/admin/all',
                    method: 'get'
                }).then(res => {
                    this.allAdmin = res.data
                })
            },
            exportExcel(){
                exportExcel('/health/record/export/excel',this.selectIds)
            }
        }
    }
</script>

<style scoped>

</style>